<template>
  <el-cascader
    v-model="selectedValues"
    :options="options"
    @change="handleChange"
    placeholder="请选择"
    clearable
    show-all-levels="false"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";

interface Option {
  value: string | number;
  label: string;
  age?: number;
  name?: string;
  sex?: string;
  children?: Option[];
}

// 示例数据，二级结构
const options: Option[] = [
  {
    value: "1",
    label: "选项1",
    age: 30,
    name: "张三",
    sex: "男",
    children: [
      {
        value: "1-1",
        label: "选项1-1",
        age: 10,
        name: "小张",
        sex: "男",
      },
      {
        value: "1-2",
        label: "选项1-2",
        age: 12,
        name: "小李",
        sex: "女",
      },
    ],
  },
  {
    value: "2",
    label: "选项2",
    age: 40,
    name: "李四",
    sex: "女",
    children: [
      {
        value: "2-1",
        label: "选项2-1",
        age: 15,
        name: "小王",
        sex: "男",
      },
    ],
  },
];

// v-model 绑定的值，默认空数组
const selectedValues = ref<(string | number)[]>([]);

// change事件处理
const handleChange = (value: any) => {
  console.log("选中节点数据：", value);
  const v1 = options.find((opt) => opt.value === value[0]);
  const v2 = v1?.children?.find((opt) => opt.value === value[1]);
  console.log("选中节点完整信息：", v1, v2);
  console.log("选中节点的年龄信息：", selectedValues.value);
};
</script>
